import React, { Component } from 'react';
import { View, Text, LoaderScreen, Colors } from 'react-native-ui-lib';
import { TestCase, TestSuite } from '@rnoh/testerino';

// 自定义加载器组件
const CustomLoaderComponent = () => (
  <View>
    <Text >自定义加载器1...</Text>
  </View>
);

const CustomLoaderComponent1 = () => (
  <View>
    <Text >自定义加载器2...</Text>
  </View>
);

export default class LoadingScreen extends Component {
  state = {
    loading: true,
  };



  componentDidMount() {
    setTimeout(() => {
      // this.setState({loading: false});
    }, 2500);
  }

  render() {
    const { loading } = this.state;
    return (
      <TestSuite name="Loader">
        <TestCase itShould="设置 message 属性">
          <View >
            <View flex bg-orange70 center>
              <LoaderScreen
                color={Colors.blue30}
                message="Loading1..."

              />

              <LoaderScreen
                color={Colors.blue30}
                message="Loading2..."

              />
            </View>
          </View>
        </TestCase>

        <TestCase itShould="设置 containerStyle 属性">
          <View >
            <View flex bg-orange70 center>
              <LoaderScreen
                containerStyle={{ backgroundColor: "red" }}
              />
              <LoaderScreen
                containerStyle={{ backgroundColor: "blue" }}
              />
            </View>
          </View>
        </TestCase>

        <TestCase itShould="设置 customLoader 属性">
          <View >
            <View flex bg-orange70 center>
              <LoaderScreen
                customLoader={<CustomLoaderComponent />}
                message="Loading..."
              />

              <LoaderScreen
                customLoader={<CustomLoaderComponent1 />}
                message="Loading..."
              />
            </View>
          </View>
        </TestCase>

        <TestCase itShould="设置 loaderColor 属性">
          <View >
            <View flex bg-orange70 center>
              <LoaderScreen
                loaderColor="red"
              />

              <LoaderScreen
                loaderColor="blue"
              />
            </View>
          </View>
        </TestCase>

        <TestCase itShould="设置 messageStyle 属性">
          <View >
            <View flex bg-orange70 center>
              <LoaderScreen
                color={Colors.blue30}
                messageStyle={{
                  fontSize: 20,
                  fontWeight: '500',
                  color: 'blue',
                }}
                message="Loading..."
              />
              <LoaderScreen
                color={Colors.blue30}
                messageStyle={{
                  fontSize: 20,
                  fontWeight: '500',
                  color: 'red',
                }}
                message="Loading..."
              />
            </View>
          </View>
        </TestCase>

        <TestCase itShould="设置 backgroundColor overlay(true)属性">
          <View >
            <View flex bg-orange70 center>
            <Text text10>              </Text>
              <LoaderScreen
                color={Colors.blue30}
                backgroundColor="green"
                overlay
              />
            </View>
          </View>
        </TestCase>

        <TestCase itShould="设置 overlay(false) 属性">
          <View >
            <View flex bg-orange70 center>
              <Text text10>              </Text>
              <LoaderScreen
                color={Colors.blue30}
                backgroundColor="green"
                containerStyle={{ backgroundColor: "red" }}
                overlay={false}
                message="Loading..."
              />
            </View>
          </View>
        </TestCase>

      </TestSuite>
    );
  }


}
